<% extend 'shared/admin-base' %>
<% block 'head': %>
<link rel="stylesheet" href="/dist/admin-shop-info.css"/>
<% end %>
<div class="row">
    <div class="col-md-12">
        <!-- BEGIN PAGE TITLE & BREADCRUMB-->
        <h3 class="page-title">
            商店信息
            <small></small>
        </h3>
        <!-- END PAGE TITLE & BREADCRUMB-->
    </div>
</div>


<div class="row">
    <div class="col-md-12">
        <!-- BEGIN PORTLET-->
        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption"><i class="fa fa-reorder"></i>信息管理</div>
                <div class="tools">
                    <a href="javascript:;" class="collapse"></a>

                </div>
            </div>
            <div class="portlet-body form">
                <!-- BEGIN FORM-->
                <form action="{{actionUrl}}" id="form_sample_1" method="post" class="form-horizontal form-bordered" ng-controller="formCtrl">
                    <div class="form-body">
                        <div class="form-group">
                            <label class="control-label col-md-3">商店名称</label>
                            <div class="col-md-3">
                                <input id="touchspin_demo1" type="text" value="<%- @data?.title %>"
                                       name="shopName" class="form-control">
                            </div>
                            <span class="help-block"></span>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-3">联系人电话</label>
                            <div class="col-md-3">
                                <input type="text" value="<%- @data?.phone %>"  name="phone" class="form-control"/>
                            </div>
                            <span class="help-block"></span>
                        </div>

                        <div class="form-group" ng-controller="AreaCtrl">
                            <label class="control-label col-md-3">商店所属区域</label>
                            <div class="col-md-3">
                                <select name="TopAreaId" id="TopArea" ng-model="selectedTopArea">
                                    <option value="{{area.id}}" ng-repeat="area in TopAreas">{{area.title}}</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <select name="areaId" id="area" ng-model="selectedArea">
                                    <option value="{{area.id}}" ng-repeat="area in areas">{{area.title}}</option>
                                </select>
                            </div>
                            <span class="help-block"></span>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-3">图片<span class="required">*</span></label>
                            <div class="col-md-9">
                                <input type="hidden" value="{{mainImgUrl}}" name="mainImg">
                                <input type="hidden" value="{{imgsUrl}}" name="imgs">
                                <div class="fileupload fileupload-new">
                                    <div class="fileupload-new thumbnail" style="width: 320px; height: 140px;" ng-show="imgs.length == 0">
                                        <img src="/empty.png" alt="" style="width: 320px; height: 130px;"/>
                                    </div>
                                    <div class="uploaded-imgs" ng-show="imgs.length != 0">
                                        <div class="clearfix">
                                            <div class="uploaded-imgs-item text-center pull-left {{mainImg == $index ? 'uploaded-imgs-item-main': ''}}" ng-repeat="img in imgs track by $index">
                                                <img ng-src="{{img}}" class="img-responsive">
                                                <div class="uploaded-imgs-item-tools  text-center">
                                                    <span class="btn blue " ng-click="setMain($index)" ng-show="mainImg != $index">设为缩略图</span>
                                                    <span class="btn green " ng-click="remove($index)">删除</span>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div>
                                        <a href="#" class="btn blue" id="upload-picker"><i class="fa fa-cloud-upload"></i>添加文件</a>
                                    </div>
                                </div>
                                <span class="label label-danger">注意!</span>
                                <span> 每张图片大小不可超过3M，缩略图建议尺寸128*128 </span>
                            </div>
                        </div>

                        <div class="form-actions fluid">
                            <div class="col-md-offset-3 col-md-9">
                                <button type="submit" class="btn green">提交</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<script id="imgs" type="text/plain" data-main="<%- @data?.mainImg %>">
    <%- @data?.imgs %>
</script>
<script id="defaultTopArea" type="text/plain"><%- @data.Area.TopAreaId %></script>
<script id="defaultArea" type="text/plain" ><%- @data.Area.id %></script>
<% block 'scripts': %>
<script src="/dist/admin-shop-info.js"></script>
<% end %>